<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="translate(title)"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="120px" :model="form" :rules="rules">
      <el-form-item :label="translate('工号')" prop="Code">
        <el-input v-model="form.Code" />
      </el-form-item>
      <el-form-item :label="translate('登录账户')" prop="Account">
        <el-input v-model="form.Account" />
      </el-form-item>
      <el-form-item :label="translate('账户名称')" prop="RealName">
        <el-input v-model="form.RealName" />
      </el-form-item>
      <el-form-item :label="translate('性别')">
        <el-select v-model="form.Gender" style="width: 100%">
          <el-option :label="translate('保密')" value="0" />
          <el-option :label="translate('男')" value="1" />
          <el-option :label="translate('女')" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item :label="translate('所属公司')" prop="CompanyId">
        <el-tree-select
          v-model="form.CompanyId"
          :check-strictly="true"
          :data="datalist"
          node-key="id"
          :props="defaultProps"
          :render-after-expand="false"
          show-checkbox
          @check="handleCheckChange"
        />
      </el-form-item>
      <el-form-item :label="translate('所在部门')">
        <el-tree-select
          v-model="form.DepartmentId"
          :check-strictly="true"
          :data="tree"
          node-key="id"
          :props="defaultProps"
          :render-after-expand="false"
          show-checkbox
        />
      </el-form-item>
      <el-form-item :label="translate('所在岗位')">
        <el-select v-model="form.PostId" :placeholder="translate('请选择')">
          <el-option
            v-for="item in userData"
            :key="item.PostId"
            :label="item.FullName"
            :value="item.PostId"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="translate('手机号码')" prop="Mobile">
        <el-input v-model="form.Mobile" />
      </el-form-item>
      <el-form-item :label="translate('联系电话')">
        <el-input v-model="form.Telephone" />
      </el-form-item>
      <el-form-item :label="translate('电子邮件')">
        <el-input v-model="form.Email" />
      </el-form-item>
      <el-form-item :label="translate('说明')">
        <el-input v-model="form.remark" />
      </el-form-item>
      <el-form-item :label="translate('允许登录')">
        <el-radio-group v-model="form.Enabled" style="width: 100%">
          <el-radio v-model="Enabled" :label="1">
            {{ translate('是') }}
          </el-radio>
          <el-radio v-model="Enabled" :label="0">
            {{ translate('否') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">{{ translate('取消') }}</el-button>
      <el-button type="primary" @click="save">
        {{ translate('确定') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit, getTreeJsonByParm } from '@/api/userManagement'
  import { getList } from '@/api/postManagement'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'UserManagementEdit',
    props: {
      datalist: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['refresh-route'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        defaultProps: {
          children: 'ChildNodes',
          label: 'text',
        },
        treeData: [],
        tree: [],
        userData: [],
        queryForm: {
          CompanyId: 'string',
          departmentId: 'string',
          nature: 'string',
        },
        form: {
          Enabled: 1,
          UserId: '',
          CompanyId: '',
          DepartmentId: '',
          PostId: '',
        },
        rules: {
          Code: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入工号'),
            },
          ],
          Account: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入登录账号'),
            },
          ],
          RealName: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入账号名称'),
            },
          ],
          Mobile: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入手机号码'),
            },
          ],
          CompanyId: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请选择所在公司'),
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })
      watch(
        () => state.form.DepartmentId,
        () => {
          userList()
        }
      )
      const handleCheckChange = (data) => {
        console.log(data)
        state.queryForm.CompanyId = data.id
        state.form.DepartmentId = ''
        console.log(state.form.value)
        departmentTree()
      }

      const handleNodeClick = (node) => {
        state.form.parentName = node.name
        state.form.parentId = node.id
      }
      const userList = async () => {
        console.log(state.form.DepartmentId)
        const params = {
          companyId: state.form.CompanyId,
          departmentId: state.form.DepartmentId,
          moduleId: state.form.DepartmentId,
          moduleType: 'ModuleId',
          export: true,
          pageNo: 1,
          pageSize: 20,
          wheres: `[{"name":"DepartmentId","value":"${state.form.DepartmentId}","displayType":"equal"}]`,
        }
        const data = await getList(params)
        if (data.code === '200') {
          state.userData = data.data.rows
          console.log(state.userData)
        }
      }
      const showEdit = (row, type) => {
        if (!row) {
          state.title = '添加'
          state.form.UserId = ''
        } else {
          state.title = '编辑'
          state.form = row
          state.queryForm.CompanyId = row.CompanyId
          departmentTree()
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        // state['formRef'].resetFields()
        // state.form = {}
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            console.log(state.form)
            const { message } = await doEdit(state.form)
            $baseMessage(message, 'success', 'vab-hey-message-success')
            // emit('refresh-route')
            close()
          }
        })
      }

      //获取编辑树形结构
      const departmentTree = async () => {
        const {
          data: { data },
        } = await getTreeJsonByParm(state.queryForm)
        state.tree = JSON.parse(data.replace(/CompanyId/g, 'CompanyId'))
        state.form.DepartmentId = state.form.DepartmentId ? state.form.DepartmentId : state.tree[0]?.id
        console.log(state.tree)
      }
      return {
        ...toRefs(state),
        handleNodeClick,
        handleCheckChange,
        showEdit,
        close,
        save,
        translate,
        userList,
      }
    },
  })
</script>
<style scoped>
  .el-form {
    display: flex;
    flex-flow: wrap;
    justify-content: left;
  }
  .el-form >>> .el-input {
    width: 234px !important;
  }
  .el-form-item {
    width: 380px;
  }
</style>
